<template>
  <el-dialog title="提示" width="620px" top="7vh" lock-scroll custom-class="info-dialog" :visible.sync="dialogVisible">
    <div class="info-panel">
      <div class="pdf-container">
        <pdf
          v-for="i in numPages"
          :key="i"
          :src="src"
          :page="i"
          style="display: block; width: 100%"
        />
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="downLoad">
        下载附件简历
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import pdf from 'vue-pdf'
var loadingTask = pdf.createLoadingTask('/1.pdf')
export default {
  name: 'PdfDialog',
  components: { pdf },
  filters: {
  },
  props: {
  },
  data() {
    return {
      src: loadingTask,
      numPages: undefined,
      dialogVisible: false
    }
  },
  mounted() {
    this.src.promise.then(pdf => {
      console.log(pdf)
      this.numPages = pdf.numPages
    })
  },
  methods: {
    show() {
      this.dialogVisible = true
    },
    downLoad() {

    }
  }
}
</script>

<style lang="scss" scoped>
  .info-panel{
      padding: 10px 20px;
      .pdf-container{
        height: 620px;
        margin: 0 auto;
        overflow-y: auto;
        scrollbar-width: none; /* firefox */
        -ms-overflow-style: none; /* IE 10+ */
        &::-webkit-scrollbar {
          display: none; /* Chrome Safari */
        }
      }
  }
  ::v-deep .info-dialog .el-dialog__body{
    padding: 0;
  }
</style>
